<include file="public@header"/>

<style type="text/css">
    .option-parent {
        position: relative;
    }

    .moveanswer-btn {
        position: absolute;
        top: 7px;
        right: -5%;
    }

    .span_add{
        display: inline-block;
        margin-top: 20px;
        margin-bottom: 5px;
        width: 104px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        color: #38DAA6;
        font-size: 14px;
        border: 1px solid #38DAA6;
        border-radius: 4px;
        cursor: pointer;
    }

</style>
</head>
<body>
<div class="wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('ask/index',['listid'=>$listid,'status'=>$status])}">问卷题目</a></li>
        <li class="active"><a href="{:url('ask/edit',['listid'=>$listid])}">编辑</a></li>
    </ul>
    <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('ask/editPost')}">
        <div class="form-group">
            <label for="input-name" class="col-sm-2 control-label">题干<span class="form-required">*</span></label>
            <div class="col-md-6 col-sm-10">
                <input type="text" class="form-control" id="input-name" name="title" value="{$result.title}">
            </div>
        </div>
        <div class="form-group">
            <label for="input-name" class="col-sm-2 control-label">选项个数(正整数)<span class="form-required">*</span></label>
            <div class="col-md-6 col-sm-10">
                <input type="text" disabled="disabled" class="form-control" id="input-count" value="{$result.count_option}" name="count_option" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
            </div>
        </div>
        <div class="form-group">
            <label for="input-name" class="col-sm-2 control-label">最多可选(正整数)<span class="form-required">*</span></label>
            <div class="col-md-6 col-sm-10">
                <input type="text" class="form-control" id="input-name" value="{$result.count_max}" name="count_max" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
            </div>
        </div>
        <div class="form-group">
            <label for="input-name" class="col-sm-2 control-label">最少可选(正整数)<span class="form-required">*</span></label>
            <div class="col-md-6 col-sm-10">
                <input type="text" class="form-control" id="input-name" value="{$result.count_min}" name="count_min" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
            </div>
        </div>
        <div class="form-group">
            <label for="input-name" class="col-sm-2 control-label">选项<span class="form-required">*</span></label>
            <div class="col-md-6 col-sm-10" id="options">
                <volist name="$result.option" id="vo">
                    <div class="option-parent">
                        <input type="text" class="form-control" id="input-name" name="option[]" value="{$vo}" style="margin-bottom:3px">

                        <if condition="isset($result.thumbs_json[$key])">
                            <input type="hidden" name="thumb{$key}" id="thumbnail{$key}"  value="{$result.thumbs_json[$key]}">
                            <a href="javascript:uploadOneImage('图片上传','#thumbnail{$key}');">
                                <if condition="empty($result.thumbs_json[$key])">
                                    <img src="__TMPL__/public/assets/images/default-thumbnail.png"
                                         id="thumbnail{$key}-preview" width="135" style="cursor: hand"/>
                                    <else/>
                                    <img src="{:cmf_get_image_preview_url($result.thumbs_json[$key])}" id="thumbnail{$key}-preview"
                                         width="135" style="cursor: hand"/>
                                </if>
                            </a>

                        </if>
                        <a class="moveanswer-btn btn btn-xs btn-danger js-ajax-dialog-btn"
                           href="{:url('ask/moveanswer',array('index'=> $key, 'id' => $result.id))}"
                           data-msg="确认删除此项?">删除</a>
                        <input type="hidden" name="option_key[]" value="{$key}">
                    </div>
                </volist>
            </div>
        </div>

        <div class="form-group add_bd">
            <label for="input-name" style="margin-right: 15px;" class="col-sm-2 control-label"><span class="form-required"></span></label>
            <div class="col-md-6 col-sm-10 span_add add_1_1">添加选项</div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="hidden" class="form-control" name="id" value="{$result.id}">
                <if condition="$status eq 0 || $status eq 2">
                    <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('EDIT')}</button>
                </if>
                <a class="btn btn-default" href="{:url('ask/index',array('listid'=>$listid,'status'=>$status))}">{:lang('BACK')}</a>
            </div>
        </div>
    </form>
</div>
<script src="__STATIC__/js/admin.js"></script>

<script type="text/javascript">


    $(function () {
        $("#input-count").on("change",function(){
            html='';
            var count = $(this).val();
            for(i=0;i<count;i++){
                html+='<input type="text" class="form-control" id="input-name" name="option[]" style="margin-bottom:3px">';
            }
            $("#options").html(html);
        });
    });

    $('.add_1_1').on('click',function (){
        let _that=$(this);
        // 最后一个选项元素的id值
        let ids = [];
        $('input[name^="option_key"]').each(function(index,element){	//index下标 element 当前选中的元素
            ids.push($(this).val());//压入对象数组
        });
        let newId = parseInt(ids[ids.length - 1]) + 1;

        let html1 = '<div class="option-parent"><input type="text" class="form-control" id="input-name" name="option[]" value="" style="margin-bottom:3px">';
        html1 += '<input type="hidden" name="thumb' + newId + '" id="thumbnail' + newId + '"  value="">';
        html1 += '<a href="javascript:uploadOneImage(\'图片上传\',\'#thumbnail' + newId + '\');">';
        html1 += '<img src="__TMPL__/public/assets/images/default-thumbnail.png" id="thumbnail' + newId + '-preview" width="135" style="cursor: hand"/>';
        html1 += '</a>';
        html1 += '<a class="moveanswer-btn btn btn-xs btn-danger moveanswer-new-btn' + newId + '" onclick="moveAnswer(' + newId + ')" href="javascript:;"';
        html1 += 'data-msg="确认删除此项?">删除</a>';
        html1 += ' <input type="hidden" name="option_key[]" value="' + newId + '">';
        html1 += '</div>';

        $('#options').append(html1);

    });


    //移除追加的选项
    function moveAnswer(newId) {
        let id = '{$result.id}';
        $(".moveanswer-new-btn" + newId).parents(".option-parent").remove();

    }




</script>
</body>
</html>